<template>
  <div class="withdraw-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h2>提现管理</h2>
        <p class="subtitle">管理您的提现记录和申请</p>
      </div>
    </div>

    <!-- 提现记录表格 -->
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :model="searchForm" layout="inline" class="search-form">
        <a-form-item field="dateRange" label="申请时间">
          <a-range-picker v-model="searchForm.dateRange" style="width: 260px" />
        </a-form-item>
        <a-form-item field="status" label="提现状态">
          <a-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            allow-clear
            style="width: 200px"
          >
            <a-option value="pending">处理中</a-option>
            <a-option value="success">已完成</a-option>
            <a-option value="failed">已驳回</a-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 提现记录表格 -->
      <a-table
        :data="withdrawList"
        :columns="columns"
        :pagination="pagination"
        @page-change="onPageChange"
      >
        <!-- 提现金额 -->
        <template #amount="{ record }">
          <span class="amount">¥{{ record.amount }}</span>
        </template>

        <!-- 提现账户 -->
        <template #account="{ record }">
          <div class="account-info">
            <div class="bank-name">{{ record.bankName }}</div>
            <div class="account-number">{{ record.accountNumber }}</div>
          </div>
        </template>

        <!-- 状态 -->
        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.status)">
            {{ record.statusText }}
          </a-tag>
        </template>

        <!-- 操作 -->
        <template #operations="{ record }">
          <a-button
            v-if="record.status === 'failed'"
            type="text"
            @click="handleViewReason(record)"
          >
            查看原因
          </a-button>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  IconPlus,
  IconSearch,
  IconRefresh,
} from "@arco-design/web-vue/es/icon";

// 搜索表单
const searchForm = reactive({
  dateRange: [],
  status: null,
});

// 表格列配置
const columns = [
  {
    title: "申请时间",
    dataIndex: "createTime",
  },
  {
    title: "提现金额",
    dataIndex: "amount",
    slotName: "amount",
  },
  {
    title: "提现账户",
    dataIndex: "account",
    slotName: "account",
  },
  {
    title: "状态",
    dataIndex: "status",
    slotName: "status",
  },
  {
    title: "操作",
    slotName: "operations",
  },
];

// 提现记录列表
const withdrawList = ref([
  {
    id: 1,
    createTime: "2024-03-15 12:34:56",
    amount: "1000.00",
    bankName: "工商银行",
    accountNumber: "6222************1234",
    status: "success",
    statusText: "已完成",
  },
  {
    id: 2,
    createTime: "2024-03-14 15:30:00",
    amount: "2000.00",
    bankName: "支付宝",
    accountNumber: "137****8888",
    status: "pending",
    statusText: "处理中",
  },
  {
    id: 3,
    createTime: "2024-03-13 09:15:00",
    amount: "3000.00",
    bankName: "工商银行",
    accountNumber: "6222************5678",
    status: "failed",
    statusText: "已驳回",
  },
]);

// 分页配置
const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
});

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    success: "green",
    pending: "orange",
    failed: "red",
  };
  return colorMap[status] || "default";
};

// 处理搜索
const handleSearch = () => {
  // TODO: 调用搜索API
  Message.success("搜索成功");
};

// 处理重置
const handleReset = () => {
  searchForm.dateRange = [];
  searchForm.status = null;
};

// 处理分页
const onPageChange = (page) => {
  pagination.current = page;
  // TODO: 加载对应页数据
};

// 查看驳回原因
const handleViewReason = (record) => {
  Message.info(`驳回原因：${record.reason || "账户信息有误"}`);
};
</script>

<style lang="scss" scoped>
.withdraw-page {
  .page-header {
    @apply flex items-center justify-between mb-6;

    h2 {
      @apply text-xl font-medium mb-1;
    }

    .subtitle {
      @apply text-gray-500 text-sm;
    }
  }

  .search-form {
    @apply mb-4;
  }

  .amount {
    @apply font-medium;
  }

  .account-info {
    .bank-name {
      @apply font-medium mb-1;
    }

    .account-number {
      @apply text-sm text-gray-500;
    }
  }
}
</style>
